<template>
	<div class="loading-container" v-if="immediate">
		<div class="loading-mask">
			<el-progress type="circle" :percentage="percentage" :width="80" />
			<p>拼命加载中... {{ speed }} KB/s</p>
			<p>网络类型: {{ networkType }}</p>
		</div>
		<slot></slot>
	</div>
	<div v-else>
		<slot></slot>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const props = defineProps({
	immediate: {
		type: Boolean,
		default: false,
	},
	percentage: {
		type: Number,
		default: 0,
	},
	speed: {
		type: Number,
		default: 0,
	},
})
const networkType = ref('');
const updateNetworkType = () => {
  const networkInfo = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
  if (networkInfo) {
    networkType.value = networkInfo.effectiveType;
    networkInfo.addEventListener('change', () => {
      networkType.value = networkInfo.effectiveType;
    });
  }
};
onMounted(() => {
  updateNetworkType();
});

onUnmounted(() => {
  // 清理操作
  const networkInfo = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
  if (networkInfo) {
    networkInfo.removeEventListener('change', updateNetworkType);
  }
});
</script>

<style lang="scss" scoped>
.loading-container {
	width: 100%;
	height: 100%;

	.loading-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.9);
		display: flex;
		justify-content: center;
		align-items: center;
        flex-flow: column;
        p{
            color: white ;
        }
	}
}
::v-deep .el-progress__text {
	color: rgb(255, 255, 255) !important; /* 更改为所需的文本颜色 */
}
</style>
